<template>
  <view>
    <view class="login-container">
      <!-- 提示登录的图标 -->
      <uni-icons type="contact-filled" size="100" color="#AFAFAF"></uni-icons>
      <!-- 登录按钮 -->
      <button type="primary" class="btn-login" open-type="getUserInfo" @getuserinfo="getuserinfo">一键登录</button>
      <!-- 登录提示 -->
      <view class="tips-text">登录后尽享更多权益</view>
    </view>
  </view>
</template>

<script>
  import {mapMutations,mapState} from 'vuex'
export default {
  name: 'my-login',
  data() {
    return {};
  },
  computed:{
   ...mapState('m_user',['jumpInfo'])
  },
  methods:{
    ...mapMutations('m_user',['updateUserInfo','updateToken','updateJumpInfo']),
    getuserinfo(e){
      // console.log(e);
      // e.detail.userInfo就是用户信息
      // console.log(e.detail.userInfo);
      // 把用户信息存起来
      this.updateUserInfo(e.detail.userInfo)
      // 登录 并获取token值
      this.getToken(e.detail)
    },
    async getToken(res){
      // 登录
       const [err,succ]=await uni.login()
       if(err!==null || succ.errMsg!=='login:ok'){
         return uni.$showError('登录失败，请稍后再试')
       }
       const query={
         encryptedData:res.encryptedData,
         rawData:res.rawData,
         iv:res.iv,
         signature:res.signature,
         code:succ.code
       }
       // 获取TOKEN值
       const {data}=await uni.$http.post('/api/public/v1/users/wxlogin',query)
       // 测试代码:需注释下面这一行
       if(data.meta.status!==200) return uni.$showMsg('登陆失败')
       uni.$showMsg('登录成功')
       // 调用vuex中的更改token的函数：
       // 真实代码，非测试：
       this.updateToken(data.message.token)
       // 测试代码：
       // this.updateToken('Bearer eyJhbGciOiJIUzI1NiIBearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1aWQiOjE2OSwiaWF0IjoxNjYzNzQzMTg5LCJleHAiOjEwMDE2NjM3NDMxODh9.JMxT8SIytaIAFyh73-M7ev2FrbFR2KZ6gUw5wCdL7N4"sInR5cCI6IkpXVCJ9.eyJ1aWQiOjE2OSwiaWF0IjoxNjYzNzQzMTg5LCJleHAiOjEwMDE2NjM3NDMxODh9.JMxT8SIytaIAFyh73-M7ev2FrbFR2KZ6gUw5wCdL7N4')
       // 登陆成功之后，返回到登陆之前的页面
       if(this.jumpInfo && this.jumpInfo.opentype==='switchTab'){
         uni.switchTab({
           url:this.jumpInfo.from,
           // 跳回购物车页面成功之后，要把jumpInfo清空
           complete:()=>{
             this.updateJumpInfo(null)
           }
         })
       }
       
    }
  }
};
</script>

<style lang="scss">
.login-container {
  // 登录盒子的样式
  height: 750rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;

  // 登录按钮的样式
  .btn-login {
    width: 90%;
    border-radius: 100px;
    margin: 15px 0;
    background-color: #c00000;
  }

  // 按钮下方提示消息的样式
  .tips-text {
    font-size: 12px;
    color: gray;
  }
}
</style>
